<template>
  <div class="bg">
    <m-header :title="title" :show="true"></m-header>
    <div class="title">帕劳用户登录</div>
    <div class="form-sty">
      <div class="input-sty">账号：
        <input type="text" placeholder="请输入邮箱" :model="logindata.user">
      </div>
      <div class="input-sty">
        密码：
        <input type="password" placeholder="请输入验证码" :model="logindata.user" class="password">
        <span class="v-code" v-if="show_code" @click="v_code">点击获取验证码</span>
        <span class="v-code" v-else>重新获取{{count}}</span>
      </div>
    </div>
    <div class="confirm">
      <Button type="warning" long @click="login">登录</Button>
    </div>
  </div>
</template>

<script>
import MHeader from "components/header/header";
import { signup } from "@/api/user";
export default {
  name: "login",
  data() {
    return {
      title: "",
      logindata: {
        user: "",
        password: ""
      },
      show_code: true,
      timer: null,
      count: ""
    };
  },
  methods: {
    v_code() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show_code = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show_code = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    login() {
      this.$router.push({ path: "/index" });
    }
  },
  components: {
    MHeader
  }
};
</script>

<style lang="stylus" scoped>
.bg {
  .title {
    padding: 100px;
    text-align: center;
  }

  .form-sty {
    padding: 0 40px;

    .input-sty {
      border-bottom: 1px solid #969696;
      margin-bottom: 40px;

      input {
        height: 50px;
        width: 70%;
        border: 0;
        outline: none;
      }

      .password {
        width: 55%;
      }

      .v-code {
        padding-left: 26px;
        text-align: center;
        font-size: 20px;
        color: #1DA7E1;
        border-left: 1px solid #969696;
      }
    }
  }

  .confirm {
    padding: 0 40px;
  }
}
</style>
